<template>
  <!-- 店铺管理、填写问卷 -->
  <view class="shopmanage-container">
    <view class="user-list flex items-center justify-between">
      <text class="list-name">店铺名称</text>
      <view class="flex">
        <text class="list-val">{{ shopinfo.name }}</text>
      </view>
    </view>
    <view class="user-list flex items-center justify-between" @click="showOpenDate = true">
      <text class="list-name">店铺开业时间</text>
      <view class="flex items-center">
        <text class="list-val" :class="{ 'text-gray': !shopForm.openDate }">{{ shopForm.openDate ? shopForm.openDate : "请选择店铺开业时间~" }}</text>
        <image class="chevronright" :src="IMG_URL2 + 'common/chevron-right.svg'"></image>
      </view>
    </view>
    <view class="user-list flex items-center justify-between" @click="showWorkTime = true">
      <text class="list-name">店铺上班时间</text>
      <view class="flex items-center">
        <text class="list-val" :class="{ 'text-gray': !workTime1 }">{{ workTime1 ? workTime1 : "请选择店铺上班时间~" }}</text>
        <image class="chevronright" :src="IMG_URL2 + 'common/chevron-right.svg'"></image>
      </view>
    </view>
    <view class="user-list flex items-center justify-between" @click="showWorkTime1 = true">
      <text class="list-name">店铺下班时间</text>
      <view class="flex items-center">
        <text class="list-val" :class="{ 'text-gray': !workTime2 }">{{ workTime2 ? workTime2 : "请选择店铺下班时间~" }}</text>
        <image class="chevronright" :src="IMG_URL2 + 'common/chevron-right.svg'"></image>
      </view>
    </view>
    <view class="user-list flex items-center justify-between">
      <text class="list-name">店铺实用面积</text>
      <view class="flex items-center">
        <input class="list-val" v-model="shopForm.area" placeholder="请输入店铺实用面积~" maxlength="50"
          placeholder-style="color:#c8c9cc;fontSize:28rpx" />
        <text class="unit">m²</text>
      </view>
    </view>

    <view class="button-box px-48">
      <view class="exit-login bg2" @click="onSave" :disabled="loading">
        <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon>
        <text>完成</text>
      </view>
    </view>
    <up-datetime-picker :show="showOpenDate" v-model="value1" mode="date" @cancel="cancelOpenDate"
      @confirm="confirmOpenDate"></up-datetime-picker>

    <up-datetime-picker :show="showWorkTime" v-model="value4" title="店铺上班时间" mode="time" closeOnClickOverlay @confirm="confirmWorkTime"
      @cancel="cancelWorkTime"></up-datetime-picker>
    <up-datetime-picker :show="showWorkTime1" v-model="value5" title="店铺下班时间" mode="time" closeOnClickOverlay @confirm="confirmWorkTime1"
      @cancel="cancelWorkTime1"></up-datetime-picker>  


  </view>
</template>

<script setup>
import { computed, ref, reactive, onBeforeMount, unref } from 'vue';
import { IMG_URL2 } from "@/config";
import { clone } from 'lodash';
import { shopApi } from "@/api";
import { formatDate } from '@/utils/util';
const loading = ref(false);
let shopinfo = reactive({
  name: '',
})

const shopForm = reactive({
  area: '',
  openDate: '',
  workTime: '',
  
});
let workTime1= ref('');
let workTime2= ref('');
let showOpenDate = ref(false);
let value1 = ref(Date.now());
let showWorkTime = ref(false);
let showWorkTime1 = ref(false);

let value4 = ref('');
let value5=ref('')
onLoad((options) => {
  console.log("url参数", options);
  shopApi.SHOPGETCURRENTSHOPINFO().then((res) => {
    if (res.code == 200) {
      shopinfo.name = res.result.name

      shopForm.area = res.result.area
      shopForm.openDate = res.result.openDate

      if(res.result.workTime){
				workTime1.value=res.result.workTime.split('-')[0]
				workTime2.value=res.result.workTime.split('-')[1]
			}
			value1.value=new Date(res.result.openDate).getTime()
      value1.value = new Date(res.result.openDate).getTime()
    } else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }

  })
});
const confirmOpenDate = (e) => {
  shopForm.openDate = formatDate(e.value)
    showOpenDate.value = false
}
const cancelOpenDate = () => {
  showOpenDate.value = false
}

const confirmWorkTime = (e) => {
  workTime1.value = e.value
  showWorkTime.value = false
}
const cancelWorkTime = () => {
  showWorkTime.value = false
}


const confirmWorkTime1=(e)=>{
	workTime2.value = e.value
    showWorkTime1.value = false
}
const cancelWorkTime1 = ()=>{
    showWorkTime1.value = false
}

function isNumberWithDot(str) {
    const regex = /^\d+(\.\d+)?$/;
    return regex.test(str);
}

// 保存信息
async function onSave() {
  if(workTime1.value){
		if(!workTime2.value){
			uni.showToast({ title: '请选择店铺下班时间', icon: "none" });
			return
		}
	}
	if(workTime2.value){
		if(!workTime1.value){
			uni.showToast({ title: '请选择店铺上班时间', icon: "none" });
			return
		}
	}
  if (shopForm.area) {
    if (!isNumberWithDot(shopForm.area)) {
      uni.showToast({ title: '请输入正确的店铺实用面积', icon: "none" });
      return
    }
  }
  let params = {
    area: shopForm.area,
    openDate: shopForm.openDate,
    workTime:`${workTime1.value?workTime1.value:''}-${workTime2.value?workTime2.value:''}`,
  }
  loading.value = true;
  shopApi.FRANCHISEEUPDATESHOPINFO(params).then((res) => {
    loading.value = false;
    if (res.code == 200) {
      uni.showToast({ title: res.errMsg, icon: "none" });
      // 进入首页
      setTimeout(() => {
        uni.switchTab({ url: `/pages/index/index` });
      },2000)

    } else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }

  }).catch((err) => {
    console.log(err)
  })
}

</script>

<style lang="scss" scoped>
.shopmanage-container {
  .info-head {
    .info-title {
      line-height: 60rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }

    .save-btn {
      color: #fff;
      background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
      width: 100rpx;
      border-radius: 30rpx;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 28rpx;
    }

    .dis-btn {
      opacity: 0.5;
    }
  }


  // 个人信息项
  .user-list {
    background: #fff;
    height: 100rpx;
    border-bottom: 1rpx solid #f6f6f6;
    padding: 0 20rpx;
    box-sizing: border-box;


    .chevronright {
      width: 32rpx;
      height: 32rpx;
      margin-left: 24rpx;
    }

    .unit {
      //styleName: Body/Large;
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: right;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: rgba(0, 0, 0, 0.9);
      margin-left: 24rpx;
    }

    .list-name {
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.6);
    }

    .avatar {
      width: 67rpx;
      height: 67rpx;
      border-radius: 50%;
    }

    .list-val {
      color: #2f2f2f;
      font-size: 28rpx;
      text-align: right;
       &.text-gray {
        color: #808080; 
      }
    }
  }

  .button-box {
    width: 100%;
    position: fixed;
    bottom: 0rpx;
    left: 0;
    z-index: 9;
    background-color: #fff;
  }

  .exit-login {
    width: 654rpx;
    height: 92rpx;
    line-height: 92rpx;
    background: #D68E44;
    color: #ffffff;
    text-align: center;
    border-radius: 64px;
    font-size: 32rpx;
    margin-bottom: 40rpx;
    display: flex;
    justify-content: center;
  }

  .bg1 {
    background: rgba(253, 236, 219, 1);
    color: rgba(145, 74, 0, 1);
  }

  .exit-login:after {
    border: none;
  }

  .tips {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: right;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(145, 74, 0, 1);
    padding: 24rpx;
    box-sizing: border-box;
  }
}
</style>
